<template>
  <vue-form
    v-model="formData"
    :schema="jsonData"
    :custom-rule="customRule"
    ref="vueForm"
    @on-submit="handlerSubmit"
     @on-change="handlerChange"
  >
    <div slot-scope="{ formData, formRefFn }">
      <!-- <pre style="background-color: #eee">{{
        JSON.stringify(formData, null, 4)
      }}</pre> -->
      <p style="display: none">
        <el-button
          @click="consoleLog(formRefFn)"
          type="primary"
          class="clickBtn"
          >点击</el-button
        >
      </p>
    </div>
  </vue-form>
</template>

<script>
export default {
  name: "Demo",
  data() {
    const that = this;
    return {
      formData: {},
      schema: {
        type: "object",
        title: "JSON模板",
        properties: {
          imgList: {
            title: "imgList",
            type: "array",
            minItems: 1,
            "ui:options": {
              showIndexNumber: true,
            },
            items: {
              type: "object",
              properties: {
                age: {
                  title: "年纪",
                  type: "string",
                  "err:required": "不能为空",
                },
                ns: {
                  title: "年纪1",
                  type: "string",
                  "err:required": "不能为空",
                },
              },
              required: ["age", "ns"],
            },
          },
        },
      },
      jsonData: {
        type: "object",
        title: "JSON模板",
        properties: {
          CheckCode: {
            type: "string",
            title: "CheckCode",
            default: "G98G7S9DF87GSDFG90S87FG09",
          },
          Module_2G4: {
            type: "object",
            title: "Module_2G4",
            properties: {
              WorkTime: {
                type: "string",
                title: "WorkTime",
                default: "模块激活工作时间",
              },
              StandbyTime: {
                type: "string",
                title: "StandbyTime",

                default: "模块睡眠待机时间",
              },
              RecvBuf_Length: {
                type: "string",
                title: "RecvBuf_Length",
                default: "模块接收buff长度",
              },
              RF_reference: {
                type: "object",
                title: "RF_reference",
                properties: {
                  Address: {
                    type: "string",
                    title: "Address",
                    default: "射频通信地址(客户编码)",
                  },
                  ReferenceChannel: {
                    type: "string",
                    title: "ReferenceChannel",
                    default: "射频基准频道(传感器/固定资产)",
                  },
                  DataRate: {
                    type: "string",
                    title: "DataRate",
                    default: "射频数据速率",
                  },
                  OperatingPower: {
                    type: "string",
                    title: "OperatingPower",
                    default: "射频工作功率",
                  },
                  WorkChannel: {
                    type: "string",
                    title: "WorkChannel",
                    default: "射频工作频道",
                  },
                  RouteGroup: {
                    type: "string",
                    title: "RouteGroup",
                    default: "射频路由分组",
                  },
                },
              },
            },
          },
          Module_RS485: {
            type: "object",
            title: "Module_RS485",
            properties: {
              Master: {
                type: "object",
                title: "Master",
                properties: {
                  Addr: {
                    type: "string",
                    title: "Addr",
                    default: "0",
                  },
                  Binding_Table: {
                    title: "Binding_Table",
                    type: "array",
                    minItems: 1,
                    "ui:options": {
                      showIndexNumber: true,
                    },
                    items: {
                      type: "object",
                      properties: {
                        DeviceID: {
                          title: "DeviceID",
                          type: "string",
                          default: "0",
                          "err:required": "不能为空",
                        },
                        RegisterAddr: {
                          title: "RegisterAddr",
                          type: "string",
                          default: "0",
                          "err:required": "不能为空",
                        },
                        RegisterCount: {
                          title: "RegisterCount",
                          type: "string",
                          default: "0",
                          "err:required": "不能为空",
                        },
                      },
                      required: ["DeviceID"],
                    },
                  },
                },
              },
              Slave: {
                type: "object",
                title: "Slave",
                properties: {
                  Addr: {
                    type: "string",
                    title: "Addr",
                    default: "0",
                  },
                  Binding_Table: {
                    title: "Binding_Table",
                    type: "array",
                    minItems: 1,
                    "ui:options": {
                      showIndexNumber: true,
                    },
                    items: {
                      type: "object",
                      properties: {
                        DeviceID: {
                          title: "DeviceID",
                          type: "string",
                          default: "0",
                          "err:required": "不能为空",
                        },
                        RegisterAddr: {
                          title: "RegisterAddr",
                          type: "string",
                          default: "0",
                          "err:required": "不能为空",
                        },
                        RegisterCount: {
                          title: "RegisterCount",
                          type: "string",
                          default: "0",
                          "err:required": "不能为空",
                        },
                      },
                      required: ["DeviceID"],
                    },
                  },
                },
              },
            },
          },
        },
      },
      customRule: ({ field, value, rootFormData, callback }) => {
        const rules = [
          {
            rule: /Module_RS485\.Master\.Binding_Table\.\d+\.DeviceID/,
            validator(value, rootFormData) {
              console.log(value);
              console.log(rootFormData);
              if (
                typeof value === "undefined" ||
                value === null ||
                value.trim() === ""
              ) {
                return "不能为空";
              } else {
                console.log(8888);
                let datas = rootFormData.Module_RS485.Master.Binding_Table;
                if (datas.length) {
                  let flag = that.isRepeat(datas);
                  console.log(flag);
                  if (flag) {
                    return "不能有相同的值";
                  }
                }
              }
            },
          },
          {
            rule: /imgList\.\d+\.ns/,
            validator(value, rootFormData) {
              if (
                typeof value === "undefined" ||
                value === null ||
                value.trim() === ""
              ) {
                return "不能为空";
              }
            },
          },
        ];

        for (const ruleItem of rules) {
          // String | Regx
          if (
            (String(ruleItem.rule) === ruleItem.rule &&
              ruleItem.rule === field) ||
            (Object.prototype.toString.call(ruleItem.rule) ===
              "[object RegExp]" &&
              ruleItem.rule.test(field))
          ) {
            const error = ruleItem.validator(value, rootFormData);
            // 停止继续校验
            if (error) return callback(error);
          }
        }
        return callback();
      },
    };
  },
  mounted() {
    console.log(this.formData);
  },
  methods: {
    consoleLog(getForm) {
      console.log(this.formData);
      console.log(getForm(), "22222");
      console.log(this.$refs.vueForm.$children[0]);
      getForm().validate((valid) => {
        if (valid) {
        }
      });
    },
    isRepeat(arr) {
      var hash = {};
      for (var i in arr) {
        if (hash[arr[i].DeviceID]) return true;
        hash[arr[i].DeviceID] = true;
      }
      return false;
    },
    handlerSubmit(){},
    handlerChange(val){
        this.$emit('jsondataConFig',val.newValue)
    }
  },
};
</script>
<style lang="scss">
.layoutColumn {
  max-height: calc(100vh - 250px) !important;
  min-height: 300px !important;
  overflow-y: scroll !important;
}
</style>